<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="商家入驻" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="bg-f7f7f7 w100" style="height: 10rpx;"></view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24">
			<view class="fs-28 color-333">名称<text class="color-zhuse margin-left-10">*</text></view>
			<input type="text" v-model="subInfo.name" class="fs-26 color-aaa flex1 text-right" placeholder="请输入名称">
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24">
			<view class="fs-28 color-333">店铺基本信息<text class="color-zhuse margin-left-10">*</text></view>
			<input type="text" v-model="subInfo.introduce" class="fs-26 color-aaa flex1 text-right" placeholder="请输入店铺信息">
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24">
			<view class="fs-28 color-333">档次 <text class="color-zhuse margin-left-10">*</text></view>
			<view class="flex align-center">
				<picker @change="bindPickerChange" range-key="value" :value="value2" :range="levelArr"  style="width: 100%;"
					class="flex align-center">
					<text class="color-666  fs-28" v-if="subInfo.level">{{levelArr[value2].value}}</text>
					<text class="color-666  fs-28" v-else>请选择</text>
					<image src="../../static/img/down.png" style="width: 30rpx;height: 30rpx;"></image>
				</picker>
			</view>
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24"  @tap="selarea()">
			<view class="fs-28 color-333">地区<text class="color-zhuse margin-left-10">*</text></view>
			<input type="text" class="fs-26 color-aaa flex1 text-right" disabled v-model="area"  placeholder="请选择地区">
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24">
			<view class="fs-28 color-333">联系电话 <text class="color-zhuse margin-left-10">*</text></view>
			<input type="number" v-model="subInfo.mobile" class="fs-26 color-aaa flex1 text-right" placeholder="请输入联系电话">
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24" @tap="chooseLocation()">
			<view class="fs-28 color-333">地址<text class="color-zhuse margin-left-10">*</text></view>
			<input type="text" disabled class="fs-26 color-aaa flex1 text-right" v-model="subInfo.jw_address" placeholder="请选择地址">
			<image src="../../static/img/ads.png" style="width: 30rpx;height: 30rpx;"></image>
		</view>
		<view class="solid-bottom bg-fff flex align-center justify-between h50 padding-x-24" >
			<!-- @tap="selcate()" -->
			<view class="fs-28 color-333">类型<text class="color-zhuse margin-left-10">*</text></view>
			<view class="flex align-center">
				<picker @change="bindPickerChange2" range-key="name" :value="value3" :range="cateArr"  style="width: 100%;"
					class="flex align-center">
					<text class="color-666  fs-28" v-if="subInfo.classify_pid">{{cateArr[value3].name}}</text>
					<text class="color-666  fs-28" v-else>请选择</text>
					<image src="../../static/img/down.png" style="width: 30rpx;height: 30rpx;"></image>
				</picker>
			</view>
			<!-- <input type="text" disabled v-model="cateName" class="fs-26 color-aaa flex1 text-right" placeholder="请选择类型"> -->
		</view>
		<view class="bg-f7f7f7 w100" style="height: 10rpx;"></view>
		<view class="padding-x-24">
			<view class="padding-top-20 flex align-center solid-bottom">
				<!-- <text class="fs-28 color-999 margin-right-36 padding-bottom-20 ">身份证</text> -->
				<text class="fs-28 color-999 margin-right-36 padding-bottom-20" @click="changeImg('license')" :class="imgType == 'license' ? 'on':''">营业执照</text>
				<text class="fs-28 color-999 margin-right-36 padding-bottom-20" @click="changeImg('qualifications')"  :class="imgType == 'qualifications' ? 'on':''">其他资质</text>
			</view>
			<!-- <view class="margin-top-30 fs-26 color-aaa">
				1.身份证照片不得有遮挡，保证字迹清晰<br>
				2.请在白色背景下拍摄，保证身份证边缘清晰<br>
				3.请从证件的正上方拍摄，防止画面变形
			</view> -->
			<!-- <view class="flex align-center justify-center margin-top-30">
				<view class="flex1 margin-right-24 text-center">
					<view class="w100 flex align-center justify-center" style="height: 220rpx;border: 1rpx solid #EEE;">
						<image src="../../static/img/add_icon.png" style="width: 94rpx;height: 94rpx;"></image>
					</view>
					<view class="fs-28 color-333 margin-top-24">身份证正面</view>
				</view>
				<view class="flex1 text-center">
					<view class="w100 flex align-center justify-center" style="height: 220rpx;border: 1rpx solid #EEE;">
						<image src="../../static/img/add_icon.png" style="width: 94rpx;height: 94rpx;"></image>
					</view>
					<view class="fs-28 color-333 margin-top-24">身份证反面</view>
				</view>
			</view> -->
			<view v-if="imgType == 'license'" class="flex align-center justify-center margin-top-30">
				<view class="w50 text-center">
					<view @tap="uploadImg('license')" class="w100 flex align-center justify-center" style="height: 220rpx;border: 1rpx solid #EEE;">
						<image v-if="!license" src="../../static/img/add_icon.png" style="width: 94rpx;height: 94rpx;"></image>
						<image v-else :src="license" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="fs-28 color-333 margin-top-24">营业执照</view>
				</view>
			</view>
			<view v-if="imgType == 'qualifications'" class="flex align-center justify-center margin-top-30">
				<view class="w50 text-center">
					<view @tap="uploadImg('qualifications')" class="w100 flex align-center justify-center" style="height: 220rpx;border: 1rpx solid #EEE;">
						<image v-if="!qualifications" src="../../static/img/add_icon.png" style="width: 94rpx;height: 94rpx;"></image>
						<image v-else :src="qualifications" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="fs-28 color-333 margin-top-24">其他资质</view>
				</view>
			</view>
		</view>
		<view v-if="status == 'apply'" class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">申请中</view>
		</view>
		<view v-if="status == 'reject'" class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">已驳回</view>
		</view>
		<view v-if="!status"  class="padding-x-60 margin-y-48 padding-bottom-30">
			<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">确定</view>
		</view>
	
		
		<!-- 地区 -->
		<uni-popup ref="area" type="bottom">
			<view class="area_wrap bg-fff padding-40 radius-top30 relative">
				<image class="area_close" src="../../static/img/close_icon.png" mode="aspectFit" @tap="close()"></image>
				<view class="fs-32 fw-bold text-center">请选择地区</view>
				<view class="flex align-center padding-y-30">
					<text class="area_sel text-cut padding-x-16" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
					<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
				</view>
				<scroll-view scroll-y class="area_box padding-y-40">
					<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
						<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 地区end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subInfo:{
					member_id:"",
					classify_pid:"",
					classify_id:"",
					name:"",
					level:"",
					introduce:"",
					jw_address:"",
					longitude:"",
					latitude:"",
					mobile:"",
					license:"",
					qualifications:"",
					province:'',
					city:'',
					area:'',
				},
				levelArr:[],
				value2:'',
				cateArr:[],
				value3:'',
				
				area:'',
				list:[],
				arr:[],
				current:-1,
				textCurrent:0,
				hasMore:true,
				
				imgType:'license',
				license:"",
				qualifications:"",
				status:''
			}
		},
		onLoad(opt) {
			this.subInfo.member_id = opt.member_id;
			this.init();
			this.getInfo()
		},
		methods:{
			getInfo(){
				var that = this;
				this.$api.screen().then(res=>{
					if(res.code == 1){
						this.levelArr = res.data.level
					}
				})
				
				var data = {
					pid: 0,
					type:'apply'
				}
				this.$api.classify(data).then(res => {
					if(res.code == 1){
						this.cateArr = res.data
					}
				})
				
				
				this.$api.shop_apply_info().then(res=>{
					if(res.code == 1){
						if(res.data){
							this.subInfo.classify_pid = res.data.classify_pid;
							this.subInfo.classify_id = res.data.classify_id;
							this.subInfo.name = res.data.name;
							this.subInfo.level = res.data.level;
							this.subInfo.introduce = res.data.introduce;
							this.subInfo.jw_address = res.data.jw_address;
							this.subInfo.longitude = res.data.longitude;
							this.subInfo.latitude = res.data.latitude;
							this.subInfo.mobile = res.data.mobile;
							this.subInfo.license = res.data.license;
							this.subInfo.qualifications = res.data.qualifications;
							this.license = res.data.license_img;
							this.qualifications = res.data.qualifications_img;
							this.cateName = res.data.classify_name;
							this.status = res.data.status;
							
							this.subInfo.province = res.data.province;
							this.subInfo.city = res.data.city;
							this.subInfo.area = res.data.area;
							this.area = res.data.province_name+''+res.data.city_name+''+res.data.area_name;
							
							if(that.levelArr.length){
								that.levelArr.forEach(function(item,index){
									if(item.key == res.data.level){
										that.value2 = index
									}
								})
							}
							if(that.cateArr.length){
								that.cateArr.forEach(function(item,index){
									if(item.id == res.data.classify_pid){
										that.value3 = index
									}
								})
							}
							
						}
					}
				})
				
			},
			
			submit(){
				if(this.arr.length){
					this.subInfo.province = this.arr[0].value;
					this.subInfo.city = this.arr[1].value;
					this.subInfo.area = this.arr[this.arr.length - 1].value;
				}
				this.$api.shop_apply(this.subInfo).then(res=>{
					this.$msg(res.msg)
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack()
						},400)
					}
				})
			},
			
			
			reset(){
				this.list = [];
				this.arr = [];
				this.current = -1;
				this.textCurrent = 0;
				this.area = '';
				this.init();
			},
			init(region){
				var data = {
					region: region || ''
				}
				this.$api.getRegion(data).then(res => {
					if(res.code == 1){
						this.list = res.data;
						if(this.list.length > 0){
							this.list.forEach((m,i)=>{
								if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
									this.current = i;
								}
							})
						}
					}else{
						if(res.data.length == 0){
							console.log("----")
							this.hasMore = false
							this.area = '';
							this.arr.forEach((item, index)=>{
								this.area += item.label;
							})
							this.$refs.area.close();
						}else{
							console.log("=====")
							this.hasMore = true
						}
					}
				});
			},
			toggle(item, index){
				this.current = index;
				this.init(item.value);
				this.arr[this.textCurrent] = item;
				if(this.textCurrent+1 < this.arr.length){
					this.arr = this.arr.slice(0, this.textCurrent+1)
				}
				this.textCurrent++;
				this.current = -1;
			},
			selarea(){
				this.$refs.area.open();
				if(!this.hasMore){
					if(this.arr.length == 1){
						this.textCurrent = this.arr.length - 1;
						this.init();
					}
					if(this.arr.length > 1){
						this.textCurrent = this.arr.length - 1;
						this.init(this.arr[this.arr.length - 2].value || '');
					}
					if(this.arr.length == 0){
						this.reset();
					}
				}
			},
			selText(item, index){
				this.textCurrent = index;
				if(index == 0){
					this.init();
				}else{
					this.init(this.arr[index-1].value);
				}
			},
			close(){
				if(this.arr.length < 3){
					this.reset();
				}
				this.$refs.area.close();
			},
			

			
			changeImg(type){
				this.imgType = type
			},
			
			uploadImg(type){
				this.$tool.upload().then(res=>{
					if(type == 'license'){
						this.license =  res.showImg;
						this.subInfo.license = res.id;
					}
					if(type == 'qualifications'){
						this.qualifications =  res.showImg;
						this.subInfo.qualifications = res.id;
					}
				})
			},
			
			bindPickerChange(e){
				this.value2 = e.detail.value;
				this.subInfo.level = this.levelArr[this.value2].key;
			},
			
			bindPickerChange2(e){
				this.value3 = e.detail.value;
				this.subInfo.classify_pid = this.cateArr[this.value3].id;
			},
			
			chooseLocation() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								that.subInfo.jw_address = res.address;
								that.subInfo.longitude = res.longitude;
								that.subInfo.latitude = res.latitude;
							}
						});
						
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.on{color: $uni-color-zhuse;border-bottom: 1rpx solid $uni-color-zhuse;}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
